import React, { Component } from 'react';
import Layout from './Layout';
import { View, StyleSheet, Text } from 'react-native';
import { Content } from 'native-base';
import Icon from "react-native-vector-icons/EvilIcons";
import IconFeather from "react-native-vector-icons/Feather";
import CarPort from '../components/CarPort';
import SortBtn from '../components/SortBtn';

export default class Find extends Component {
    constructor(props){
        super(props);
        this.state = {
            carport:[
                {rent:"100.00",cycle:"元/月",desc:"车位临时出租(时间为2018年9月1日到2018年10月31日)",place:"12-2-543",on:"3个月起租"},
                {rent:"300.00",cycle:"元/月",desc:"豪华车位，独立车位",place:"1期-2-765",on:"6个月起租"},
                {rent:"150.00",cycle:"元/月",desc:"",place:"2期-1-666",on:"1个月起租"},
                {rent:"130.00",cycle:"元/月",desc:"",place:"4期-1-26",on:"1个月起租"}
            ],
        };
        this.reSort = this.reSort.bind(this);
    }

    reSort(sort) {
        const carport = this.state.carport.sort((obj,obj2) => {
            if(sort === 'asc'){
                return obj.rent < obj2.rent;
            }
            return obj.rent > obj2.rent;
        })
        this.setState({carport})
    }

    render() {
        return (
            <Layout {...this.props}>
                <Content style={{backgroundColor:"#fafafa"}}>
                    <View style={styles.flexLay}>
                        <Text style={styles.tabItem}>租车位</Text>
                        <Text style={styles.tabItem}>买车位</Text>
                    </View>
                    <View style={{padding:20}}>
                        <View style={styles.choicePark}>
                            <View style={styles.choiceParkItem}>
                                <Icon name='location' size={23}/>
                                <Text style={styles.choiceParkItemLeftText}>选择停车场</Text>
                            </View>
                            <View style={styles.choiceParkItem}>
                                <Text style={styles.choiceParkItemRightText}>天府广场</Text>
                                <IconFeather name="arrow-right" size={18} color="#999"/>
                            </View>
                        </View>
                        <SortBtn sortFun={this.reSort}/>
                        <CarPort carportList={this.state.carport}/>
                    </View>
                </Content>
            </Layout>
        );
    }
}

const styles = StyleSheet.create({
    flexLay: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#252527',
        height: 60,
    },
    tabItem: {
        height: 60,
        lineHeight: 60,
        color: 'white',
        fontSize: 16,
        borderStyle: 'solid',
        borderBottomWidth: 2,
        borderBottomColor: 'red',
    },
    choicePark: {
        display:"flex",
        flexDirection:"row",
        justifyContent: 'space-between',
        backgroundColor:"#fff",
        alignItems: "center",
        height: 60,
        borderRadius: 10,
    },
    choiceParkItem: {
        display:"flex",
        flexDirection:"row",
        alignItems: "center",
    },
    choiceParkItemLeftText: {
        fontSize: 18,
    },
    choiceParkItemRightText: {
        fontSize: 18,
        color: "#999"
    },
});